<template>
	<view>
		<view class="flex_c page">
			<!-- paddingTop:$store.state.StatusBar.statusBar + 'px' -->
			<view :style="{height:$store.state.StatusBar.statusBar + 'px'}">
			</view>
			<view class="flex_r top">
				<view class="icon_ top-item c-primary" :class="{top_item:index === currentIndex}" v-for="(item,index) in tabList"
					@click="switchTabbarPage(index)">
					{{item.title}}
				</view>
			</view>
			<swiper class="flex1 page-current" :current="currentIndex" @change="change" :style="{display: currentIndex !== 4 ? '' : 'none'}">
				<!-- <swiper-item class="img">
					<view class="img" v-if="tabberPageLoadFlag[0]">
						<a-agree></a-agree>
					</view>
				</swiper-item> -->
				<!-- 电竞 -->
				<swiper-item class="img">
					<view class="img" v-if="tabberPageLoadFlag[0]">
						<b-esports></b-esports>
					</view>
				</swiper-item>
			<!-- 	<swiper-item class="img">
					<view class="img" v-if="tabberPageLoadFlag[1]">
						<c-pool></c-pool>
					</view>
				</swiper-item> -->
				<!-- 喝茶 -->
	<!-- 			<swiper-item class="img"> 
					<view class="img" v-if="tabberPageLoadFlag[3]">
						<d-tea></d-tea>
					</view>
				</swiper-item> -->
			</swiper>
			<view class="flex1 page-current" v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2? '' : 'none'}" >
				<!-- <map id="myMap" style="width: 100%; height: 100%" min-scale="8" max-scale="13">
				</map> -->
			</view>

			<!-- 这种方式性能好点 -->
			<!-- 		<view class="flex1 page-current">
			<view class="img" v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
				<a-agree></a-agree>
			</view>
			<view class="img" v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
				<b-esports></b-esports>
			</view>
			<view class="img" v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
				<c-pool></c-pool>
			</view>
			<view class="img" v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
				<d-tea></d-tea>
			</view>
			<view class="map" v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
				<e-map></e-map>
			</view>
		</view> -->
		</view>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	import aAgree from "./page/a-agree.vue"
	import bEsports from "./page/b-esports.vue"
	import cPool from "./page/c-pool.vue"
	import dTea from "./page/d-tea.vue"
	export default {
		components: {
			aAgree,
			bEsports,
			cPool,
			dTea
		},
		onShow(){
			if(this.currentIndex == 2){
				this.switchTabbarPage(0)
			}
		},
		data() {
			return {
				tabList: [
					// {
					// 	title: '约旅友'
					// },
					{
						title: '旅友'
					},
					// {
					// 	title: '鱼塘'
					// },
					// {
					// 	title: '约喝茶'
					// },
					// {
					// 	title: '地图'
					// }
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [true, false, false, false, false,false]
			}
		},
		methods: {

			change(e) {
				console.log(e.detail.current)
				if (e.detail.source === 'touch') {
					this.switchTabbarPage(e.detail.current)
				}
			},
			// 切换导航页面
			switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				if(index == 2){
					to("/pages/m-pages/m-home/map?index="+index)
				}
				this.currentIndex = index
			}
		}
	}
</script>
<style>
	page {
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}
</style>
<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100%;
		height: 100vh;

		::-webkit-scrollbar {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.top {
			position: relative;
			z-index: 9999999;
			width: 100%;
			height: 100rpx;

			.top-item {
				padding: 0 30rpx;
				height: 80rpx;
				// color: #000;
				transition: all 0.3s;
			}

			.top_item {
				font-weight: bold;
				font-size: 46rpx;
				// color: #000;
			}
		}

		.page-current {
			position: relative;
			width: 100%;
			height: 0;

			.page-current-box {
				width: 100%;
				height: 100%;
				background-color: #16d808;
			}
		}
	}

	.map {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #16d808;
	}
</style>